<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="useProfile.photo" @click="$refs.inputRef.click()" />
          <input type="file" accept="image/*" @change="onFileChange " v-show="false" ref="inputRef" >
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="useProfile.name" @click="onNameCellClick " />
      <van-cell title="生日" is-link :value="useProfile.birthday" @click="onBirthCellClick" />
    </van-cell-group>

    <!-- 修改名称的弹出框 -->
    <van-dialog v-model="showNameDialog" title="修改名称"   show-cancel-button  :before-close='closeDialog'>
     <!-- 输入框 -->
 <van-field v-model.trim="name"  placeholder="请输入用户名"  input-align="center" maxlength="8" ref="nameRef" />
</van-dialog>
  <!-- 修改生日的弹出框 -->
<van-action-sheet v-model="showBirthSheet"  >
<van-datetime-picker
  v-model="currentDate"
  type="date"
  title="出生日期"
  :min-date="minDate"
  :max-date="maxDate"
  @confirm='updateBirthday'
  @cancel='showBirthSheet=false'
/>
</van-action-sheet>

  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapActions, mapState } from 'vuex'
import { updateUserProfileAPI, updateUserAvatarAPI } from '@/API/userAPI.js'

export default {
  name: 'UserEdit',
  data () {
    return {
      showNameDialog: false,
      name: '',
      showBirthSheet: false, // 控制出生日期弹出框
      minDate: new Date(1900, 0, 1), // 最小日期
      maxDate: new Date(2050, 10, 1), // 最大日期
      currentDate: new Date(2021, 4, 22) // 当前日期

    }
  },
  methods: {
    ...mapActions(['getUserProfile']), // 映射获取用户简介信息方法
    onNameCellClick () {
      this.name = this.useProfile.name // 点击后显示之前的名字(数据回填)
      this.showNameDialog = true // 弹出修改名称的弹窗
      this.$nextTick(() => { // 等待dom渲染完在执行里面的回调
        this.$refs.nameRef.focus()
      })
    },
    // 点击弹出框取消关闭弹出框,确认不关闭弹出框
    closeDialog (action, done) {
      // console.log(action) // 点击确认打印confirm 取消cancel
      if (action === 'cancel') { return done() } // done()关闭弹窗

      if (this.name === '' || this.name.length > 8) {
        done(false) // 如果没输入或者超出7字符就不关闭弹窗,并且弹出提示框
        this.$notify({ type: 'warning', message: '请输入1-7位字符' })
        // 持续获得焦点,便于用户继续修改
        this.$refs.nameRef.focus()
        return
      }

      this.updateName(done) // 调用done 如果都符合条件,就关闭弹窗
    },
    // 调用修改用户(姓名)
    async updateName (done) {
      try {
        const { data: res } = await updateUserProfileAPI({ name: this.name })

        if (res.message === 'OK') {
          console.log(res)
          done() // 关闭弹窗
          this.getUserProfile() // 重新获取用户简介信息
          this.$notify({ type: 'success', message: '姓名修改成功', duration: 2000 })
        }
      } catch (e) {
        console.dir(e) // e是错误对象
        if (e.response.status === 409) {
          // 名称被占用
          this.$notify({ type: 'warning', message: '用户名已经被占用,请重新输入', duration: 2000 })
          // 阻止对话框关闭
          done(false)
          // 持续获取焦点
          this.$refs.nameRef.focus()
        } else {
          done()
          this.$notify({ type: 'warning', message: '更新失败', duration: 2000 })
        }
      }
    },
    // 修改出生日期面板出现
    onBirthCellClick () {
      // 如果简介信息有生日
      if (this.useProfile.birthday) {
        this.currentDate = new Date(this.useProfile.birthday)
      } else {
        // 如果没有就为今天日期
        this.currentDate = new Date()
      }
      this.showBirthSheet = true
    },
    // 点击出生日期确认按钮修改出生日期
    async  updateBirthday (value) {
      // console.log(value)
      const dateStr = dayjs(value).format('YYYY-MM-DD')
      const res = await updateUserProfileAPI({ birthday: dateStr })
      console.log(res)
      // 成功之后再重新获取数据
      this.getUserProfile()
      this.showBirthSheet = false
    },
    // 上传头像切换图片事件
    async onFileChange (e) {
      const fd = new FormData() // 创建formdata对象
      const files = e.currentTarget.files // 获取文件对象
      if (files.length === 0) return
      fd.append('photo', files[0]) // 向fd中追加files属性

      const { data: res } = await updateUserAvatarAPI(fd)
      if (res.message === 'OK') {
        this.getUserProfile() // 更新成功 刷新数据
        this.$notify({ type: 'success', message: '头像更新成功', duration: 2000 })
      }
    }
  },
  computed: {
    ...mapState(['useProfile']) // 映射获取到用户简介信息
  },
  created () {
    this.getUserProfile() // 调用获取到用户简介信息
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
}

.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
